<template>
	<Layout>
		<view class="content">
			<!-- <image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{ title }}</text>
			</view> -->

			<uni-card title="标题通用组件" type="line">
				<Header title="首页" share />

				<Header title="您的图表" />

				<Header title="家">
					<template #left>
						<uni-icons type="bars" size="30"></uni-icons>
					</template>
					<template #right>
						<uni-icons type="cart" size="30"></uni-icons>
					</template>
				</Header>

				<Header title="家" share>
					<template #left>
						<uni-icons type="bars" size="24"></uni-icons>
					</template>
					<template #right>
						<view class="bg-white p-15 center b-rd-20">
							<uni-icons type="heart" size="24" color="red"></uni-icons>
						</view>
					</template>
				</Header>
			</uni-card>


			<uni-section title="实心标签" type="line" padding>
				<view class="example-body">
					<view class="tag-view">
						<uni-tag text="标签" type="primary" />
					</view>
					<view class="tag-view">
						<uni-tag text="标签" type="success" />
					</view>
					<view class="tag-view">
						<uni-tag text="标签" type="warning" />
					</view>
					<view class="tag-view">
						<uni-tag text="标签" type="error" />
					</view>
					<view class="tag-view">
						<uni-tag text="标签" />
					</view>
				</view>
			</uni-section>

			<uni-section title="UnoCSS 实心标签" type="line" padding>
				<view class="example-body">
					<view class="uc-m-20">
						<uni-tag text="标签" type="primary" />
					</view>
					<view class="uc-m-20">
						<uni-tag text="标签" type="success" />
					</view>
					<view class="uc-m-20">
						<uni-tag text="标签" type="warning" />
					</view>
					<view class="uc-m-20">
						<uni-tag text="标签" type="error" />
					</view>
					<view class="uc-m-20">
						<uni-tag text="标签" />
					</view>
				</view>
			</uni-section>
		</view>
	</Layout>

	<tabbar :tab-bar-list="tabBarList" :current="1"></tabbar>
</template>

<script>
	import Layout from '@/components/layout/layout'
	import TabBar from '@/components/tabbar/tabbar'
	import Header from '@/components/header/header'
	export default {
		data() {
			return {
				title: 'Hello',

				// 传统的 uni-app 页面跳转使用方式：
				tabBarList: [{
						index: 1,
						title: "首页",
						icon: "home",
						onClick: () => {
							uni.redirectTo({
								url: '/pages/index/index'
							});
						}
					},
					{
						index: 2,
						title: "扫一扫",
						icon: "scan",
						float: true,
						onClick: () => console.log("打开相机")
					},
					{
						index: 3,
						title: "我的",
						icon: "person",
						onClick: () => {
							uni.redirectTo({
								url: '/pages/mine/index'
							});
						}
					}
				]
			}
		},
		components: {
			Header, // 在此处注册组件
		},
		onLoad(option) {
			console.log('>>>> home: ', option)
		},
		methods: {},
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.tag-view {
		margin-bottom: 9px;
	}
</style>